
<template>

  <div class="thumbnail-slide" 
  :style="{ width:canvasWidth1+'px' , height: canvasHeight1+'px', transform:`scaleX(${scaleleft}) scaleY(${scaletop})`   }" 
  ref="thumbnailSlide" >
    <div
      class="elements"
      :style="{
        // transform:`scale(${scaleleft},${scaletop})`
      }"
      v-if="visible"
    >
      <div class="background" :style="backgroundStyle">
  </div>
      <ThumbnailElement
      class="huabu"
        v-for="(element, index) in slide.elements"
        :key="element.id"
        :elementInfo="element"
        :elementIndex="index + 1"
      >
    </ThumbnailElement>
   
    </div>
    <div class="placeholder" v-else>加载中 ...</div>
  </div>

</template>

<script lang="ts" setup>


import { computed, onMounted, PropType, provide, ref ,nextTick, watch} from "vue";
import { storeToRefs } from "pinia";
import { useSlidesStore ,useKeyboardStore,useMainStore} from "@/store";
import { Slide } from "@/types/slides";
import { fillDigit } from "@/utils/common";
import { injectKeySlideScale } from "@/types/injectKey";
import { VIEWPORT_SIZE } from "@/configs/canvas";
import useSlideBackgroundStyle from "@/hooks/useSlideBackgroundStyle";
const mainStore = useMainStore();
const slidesStore = useSlidesStore();
const keyboardStore = useKeyboardStore();
const thumbnailSlide:any=ref(null)

var scaleleft:any=ref(0)
var scaletop=ref(0)

var canvasWidth1 =ref(189)
var canvasHeight1 =ref(165)
onMounted(function(){
  console.log("查找高度宽度",mainStore.canvasWidth1 );
  console.log("查找高度宽度",mainStore.canvasHeight1 );
//   189  256 
//    1280  =>189+-
canvasWidth1.value = mainStore.canvasWidth1
canvasHeight1.value = mainStore.canvasHeight1

 setTimeout(function(){
 
  // 这里的宽度高度拿到的是 width: 189px;  height: 165px
  scaleleft.value=189/canvasWidth1.value
  scaletop.value=168/canvasHeight1.value
  // scaleleft.value=thumbnailSlide.value.offsetWidth/slidesStore.slideleft
  // scaletop.value=thumbnailSlide.value.offsetHeight/slidesStore.slideTop 
 })
})
const { selectedSlidesIndex: _selectedSlidesIndex, thumbnailsFocus } =
  storeToRefs(mainStore);
import ThumbnailElement from "./ThumbnailElement.vue";

const props = defineProps({
  slide: {
    type: Object as PropType<Slide>,
    required: true,
  },
  size: {
    type: Number,
    required: true,
  },
  visible: {
    type: Boolean,
    default: true,
  },
});

const { viewportRatio } = storeToRefs(useSlidesStore());

const background = computed(() => props.slide.background);
const { backgroundStyle } = useSlideBackgroundStyle(background);
onMounted(() => {
  
})
const scale = computed(() => props.size / VIEWPORT_SIZE);



provide(injectKeySlideScale, scale);
</script>

<style lang="scss" scoped>
// 左侧的宽度高度
.thumbnail-slide {
  background-color: #fff;
  overflow: hidden;
  user-select: none;
  position: relative;
  width: 189px; 
  height: 165px;
  transform-origin: 0 0 ;
  flex-shrink: 0;
}
.elements {
  transform-origin: 0 0;
  z-index: 99999;
  width: 63rem;
    height: 36rem;
}
.background {
  width: 100% ;
  height: 100%;
  background-position: center;
  position: absolute;
  
}
.placeholder {
  width: 100vh;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
